<template>
  <div>
    <a-row type="flex" justify="center" align="top" class="">
      <a-col :span="24" class="" style="height: 200px">
      </a-col>
    </a-row>
    <a-row type="flex" justify="center" align="top" class="titlestyle" style="height: 50px">
      <a-col :span="1" class="logoStyle" >
        <p class="">
          logo
        </p>
      </a-col>
      <a-col :span="2" class="logoNameStyle">
        <p class="">
          河北省金融学院计算机协会
        </p>
      </a-col>
      <a-col :span="20" >
        <p class="">

        </p>
      </a-col>
      <a-col :span="1"  class="userNameStyle">
        <p class="">
            用户名
        </p>
      </a-col>
    </a-row>
    <a-row type="flex" justify="center" align="top" class="">
      <a-col :span="18" class="logoStyle" style="height: 350px">
        <p class="">
          <ButtonCuba></ButtonCuba>
        </p>
      </a-col>
      <a-col :span="6" class="logoNameStyle" style="height: 350px">
        <p class="">
          登录
        </p>
      </a-col>
    </a-row>
    <a-row type="flex" justify="center" align="top" class="titlestyle">
      <a-col :span="8" class="" style="height: 50px">
        <p class="">
          浏览
        </p>
      </a-col>
      <a-col :span="8" class="userNameStyle" style="height: 50px">
        <p class="">
          浏览
        </p>
      </a-col>
      <a-col :span="8" class="" style="height: 50px">
        <p class="">
          浏览
        </p>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import ButtonCuba from "@/components/ButtonCuba";
export default {
  name: "Main",
  components:{
    ButtonCuba
  }
}
</script>

<style>
  .titlestyle{
    background-color: #42b983;
  }
  .logoStyle{
    background-color: azure;
  }
  .logoNameStyle{
    background-color: aqua;
  }
  .userNameStyle{
    background-color: beige;
  }
  .userNameStyle1{
    background-color: aqua;
  }
  .nullstyle{
    background-color: black;
  }
</style>